<template>
	<view>
		<navbar title="显示认证信息" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__item">
						<view class="con__box__item__label">
							结算银行
						</view>
						<input type="text" class="con__box__item__inp" v-model="form.bank" />
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							结算户主
						</view>
						<input type="text" class="con__box__item__inp" v-model="form.name" />
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							结算卡号
						</view>
						<input type="text" class="con__box__item__inp" v-model="form.cardno" />
					</view>
					<view class="u-flex u-flex-y-center u-flex-wrap">
						<view class="" style="margin: 43rpx 33rpx 0 0;" v-for="(item,index) in list" :key="index"
							@click="uppic(item)">
							<view class="con__box__title">
								{{item.name}}
							</view>
							<image :src="item.url" class="con__box__pic" mode=""></image>
						</view>
					</view>
					<view class="footer" @click="submit" v-if="!isrenz">
						<image src="/static/my/btn.png" class="btn" mode=""></image>
						<view class="footer__text">
							提交
						</view>
					</view>


					<view class="" v-if="isrenz">
						<view class="sh" v-if="form.status==2">
							<image src="/static/my/sh.png" class="shbg" mode=""></image>
							审核通过
						</view>
						<view class="sh" v-if="form.status==1">
							<image src="/static/my/sh.png" class="shbg" mode=""></image>
							待审核
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				form: {
					bank: '',
					name: '',
					cardno: '',
					front_image: "",
					back_image: '',
					hand_image: '',
					image: ''
				},
				isrenz: false,
				list: [{
						name: '身份证+银行卡(正面)',
						url: '',
						type: 'front_image'
					},
					{
						name: '身份证+银行卡(反面)',
						url: '',
						type: 'back_image'
					},
					{
						name: '手持身份证+银行卡(正面)',
						url: '',
						type: 'hand_image'
					},
					{
						name: '单位证件',
						url: '',
						type: 'image'
					},
				]
			};
		},
		methods: {
			uppic(item) {
				let _this = this

				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: 'http://88.fuliaoxx.com/api/Common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								token: uni.getStorageSync('88ftoken')
							},
							success: (res) => {
								uni.hideLoading()
								setTimeout(() => {
									// console.log(JSON.parse(res.data))
									if (JSON.parse(res.data).code == 401) {
										uni.showToast({
											title: JSON.parse(res.data).msg,
											icon: 'none'
										})
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/index/login'
											})
										}, 1000)
									}
									if (JSON.parse(res.data).code == 0) {
										uni.showToast({
											title: JSON.parse(res.data).msg,
											icon: 'none'
										})
									}
									if (JSON.parse(res.data).code == 1) {
										_this.form[item.type] = JSON.parse(res.data).data
											.url
										item.url = JSON.parse(res.data).data.fullurl
										uni.$u.toast('上传成功')
									}
								}, 1000)
							}
						});
					}
				});
			},
			submit() {
				let {
					bank,
					name,
					cardno,
					front_image,
					back_image,
					hand_image,
					image
				} = this.form
				if(!bank){
					uni.$u.toast('请输入结算银行')
					return
				}
				if(!name){
					uni.$u.toast('请输入结算户主')
					return
				}
				if(!cardno){
					uni.$u.toast('请输入结算卡号')
					return
				}
				if(!front_image){
					uni.$u.toast('请上传身份证+银行卡(正面)')
					return
				}
				if(!back_image){
					uni.$u.toast('请上传身份证+银行卡(反面)')
					return
				}
				if(!hand_image){
					uni.$u.toast('手持身份证+银行卡(正面)')
					return
				}
				if(!image){
					uni.$u.toast('单位证件')
					return
				}
				user.validCreate(this.form).then(res=>{
					if(res.data.code==1){
						uni.$u.toast('提交成功，等待审核')
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			}
		},
		onLoad() {
			user.myValid().then(res => {
				if (res.data.code == 1) {
					if (res.data.msg) {
						this.isrenz = true
						this.form = res.data.msg
						this.list.map(t=>{
							for (let key in this.form) {
								if(t.type==key){
									t.url=this.URL(this.form[key])
								}
							}
						})
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F3F7;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			padding: 16rpx 0 49rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			position: relative;

			&__item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F9F9F9;
				height: 106rpx;
				padding-right: 35rpx;

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 26rpx;
				}

				&__inp {
					text-align: right;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #030303;
					line-height: 38rpx;
					flex: 1;
				}

				&__checkbox {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 6rpx;
					margin-left: 70rpx;

					&__icon {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}

			&__title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #020202;
				line-height: 24rpx;
				margin-bottom: 24rpx;
				margin-left: 2rpx;
			}

			&__pic {
				width: 295rpx;
				height: 261rpx;
				background: #F0F3F7;
				border-radius: 20rpx;
			}
		}
	}

	.sh {
		width: 174rpx;
		height: 130rpx;
		position: absolute;
		bottom: 290rpx;
		right: 49rpx;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 31rpx;
		color: #a7bad6;
		line-height: 31rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.shbg {
			width: 174rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.footer {
		position: relative;
		margin-top: 83rpx;

		.btn {
			width: 615rpx;
			height: 105rpx;
		}

		&__text {
			width: 615rpx;
			display: flex;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #3A4E6D;
			line-height: 32rpx;
			// padding-top: 33rpx;
			position: absolute;
			padding-top: 33rpx;
			top: 0;
			left: 0;
		}
	}
</style>